<template>
  <div class="single-double">
    <ul class="type-list flex flex-rb mb-15">
      <li
        class="type-list__item flex flex-center fz-18"
        v-for="(v, i) in types"
        :key="i"
        :class="i === type ? 'selected' : ''"
        @click="type = i"
      >
        {{ v }}
      </li>
    </ul>

    <div class="flex flex-cc">
      <input
        class="flex-1 mr-10"
        type="number"
        pattern="\d*"
        placeholder="请输入下单金额"
        @input="onAmountChange"
        v-model="amount"
      />
      <van-button type="primary" round @click="place">下单</van-button>
    </div>
  </div>
</template>

<script>
import cosmo from 'cosmo-wallet-tool'
import { showToast, showLoading } from '@/assets/js/utils'
import mitt from '@/assets/js/mitt'

export default {
  data() {
    return {
      amount: '',

      // 类型列表
      types: ['单', '双'],
      type: 0,
    }
  },

  methods: {
    // 下单
    async place() {
      try {
        const isWallet = await cosmo.isWallet
        const isChrome = await cosmo.isChrome

        if (!this.amount) {
          return showToast('请输入下单金额')
        }

        // 下单参数
        const params = {
          toAddress: window.toAddress,
          volume: this.amount,
          fee: '2000',
          scale: 6,
          denom: 'uplugcn',
          memo: 'hash_order',
        }

        // 下单类型为单的情况
        if (this.type === 0) {
          params.volume = Number(params.volume) + 0.000001
        }

        params.volume = params.volume.toString()

        const loading = showLoading('加载中...')

        setTimeout(() => {
          loading && loading.close()
        }, 1000 * 10)

        try {
          let result = null

          if (isWallet) {
            result = await cosmo.sendTransferBaseCoin(params)
          } else if (isChrome) {
            result = await cosmo.chromeTool.sendTransferBaseCoin(
              params.toAddress,
              params.volume,
              params.memo
            )
          }

          if (result) {
            this.amount = ''
            mitt.$emit('refresh')
            showToast('操作成功')
          }
        } catch (err) {
          console.log(err)

          if (err && typeof err === 'string' && err.includes('error')) {
            showToast('密码错误，请重试')
          } else {
            showToast('操作失败，请重试')
          }
        }
      } catch (err) {
        console.log(err)
      }
    },

    // 只能输入小于1000的整数
    onAmountChange() {
      const val = this.amount.toString()

      if (val == 0) {
        this.amount = ''
      }

      if (val >= 1000) {
        this.amount = 1000
        showToast('下单金额不能大于1000')
      }

      if (val.includes('.')) {
        this.amount = Math.floor(this.amount)

        if (this.amount == 0) {
          this.amount = ''
        }

        showToast('下单金额只能为整数')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.type-list {
  padding: 0 20px;

  &__item {
    width: 140px;
    height: 45px;
    border-radius: 100px;
    box-shadow: 0 0 5px 2px white inset;

    &.selected {
      box-shadow: 0 0 5px 2px var(--color-primary) inset;
    }
  }
}
</style>
